
import 'package:flutter/material.dart';
import 'package:yp/helper.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class DanGeChuPingPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _DanGeChuPingPage();
  }
}

class _DanGeChuPingPage extends State<DanGeChuPingPage> {
  final DanGeChuPingLogic logic = Get.put(DanGeChuPingLogic());
  final DanGeChuPingState state = Get.find<DanGeChuPingLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: setWidth(1),
        backgroundColor: Colors.white,
        title: Text(
          '评价晒单',
          style: TextStyle(
            color: Color(0xff030303),
            fontSize: 17,
          ),
        ),
        iconTheme: IconThemeData(
          color: Color(0xff030303),
        ),
        actions: [
          GestureDetector(
            onTap: () {
              print('==== 提交 ==== 点击事件 ==== 事件 ====');
            },
            behavior: HitTestBehavior.opaque,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: setWidth(20)),
              alignment: Alignment.center,
              child: Text(
                '提交',
                style: TextStyle(
                  color: Color(0xffEA5504),
                  fontSize: 15,
                ),
              ),
            ),
          ),
        ],
      ),
      body: GetBuilder<DanGeChuPingLogic>(
        builder: (logic) {
          return Container(
            color: Color(0xffF5F5F5),
            child: ListView.separated(
              scrollDirection: Axis.vertical,
              padding: EdgeInsets.only(
                top: setWidth(20),
                bottom: setWidth(20),
              ),
              itemBuilder: (context, index) {
                return _commentGoodsWidget(index: index);
              },
              separatorBuilder: (BuildContext context, int index) {
                return SizedBox(height: setWidth(0));
              },
              itemCount: 1,
            ),
          );
        },
      ),
    );
  }

  // 评价商品
  Widget _commentGoodsWidget({
    int index,
  }) {
    return Container(
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(
              left: setWidth(22),
              top: setWidth(20),
              right: setWidth(22),
              bottom: setWidth(36),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.asset(
                  'assets/images/avatar.png',
                  width: setWidth(100),
                  height: setWidth(100),
                  fit: BoxFit.cover,
                ),
                SizedBox(
                  width: setWidth(18),
                ),
                Expanded(
                  child: Container(
                    height: setWidth(100),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '农夫山泉 NFC果汁饮料 100%NFC橙汁…',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: Color(0xff222222),
                            fontSize: 14,
                          ),
                        ),
                        Row(
                          children: [
                            Wrap(
                              spacing: setWidth(20),
                              children: ['', '', '', '', ''].asMap().map((key, value) {
                                return MapEntry(
                                  key,
                                  Container(
                                    width: setWidth(52),
                                    height: setWidth(52),
                                    color: Colors.red.withOpacity(0.5),
                                  ),
                                );
                              }).values.toList(),
                            ),
                            SizedBox(
                              width: setWidth(20),
                            ),
                            Text(
                              '好评',
                              style: TextStyle(
                                color: Color(0xffEA5504),
                                fontSize: 14,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          Divider(
            height: setWidth(1),
            indent: setWidth(22),
            endIndent: 0,
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: setWidth(18)),
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: setWidth(22)),
              child: TextField(
                controller: TextEditingController(),
                style: TextStyle(
                  color: Color(0xff222222),
                  fontSize: 12,
                ),
                maxLines: 5,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.zero,
                  hintText: '针对本品发表一下您的看法和建议吧',
                  hintStyle: TextStyle(
                    color: Color(0xffcccccc),
                    fontSize: 12,
                  ),
                  enabledBorder: OutlineInputBorder( // 设置输入框可编辑时的边框样式
                    borderRadius: BorderRadius.all(Radius.circular(0)),  // 设置边框四个角的弧度
                    borderSide: BorderSide(  // 用来配置边框的样式
                      color: Colors.transparent,  // 设置边框的颜色
                      width: setWidth(1),  // 设置边框的粗细
                    ),
                  ),
                  focusedBorder: OutlineInputBorder(  // 用来配置输入框获取焦点时的颜色
                    borderRadius: BorderRadius.all(Radius.circular(0)),  // 设置边框四个角的弧度
                    borderSide: BorderSide(  // 用来配置边框的样式
                      color: Colors.transparent,  // 设置边框的颜色
                      width: setWidth(1),  // 设置边框的粗细
                    ),
                  ),
                ),

              ),
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: setWidth(22)),
            child: Wrap(
              spacing: setWidth(24),
              runSpacing: setWidth(20),
              children: ['', '', '', '', ''].asMap().map((key, value) {
                return MapEntry(
                  key,
                  Container(
                    width: setWidth(100),
                    height: setWidth(100),
                    color: Colors.red,
                  ),
                );
              }).values.toList(),
            ),
          ),
          SizedBox(
            height: setWidth(16),
          ),
          Divider(
            height: setWidth(1),
            indent: setWidth(22),
            endIndent: 0,
          ),
          Container(
            height: setWidth(68),
            padding: EdgeInsets.symmetric(horizontal: setWidth(22)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  index % 2 == 0 ? 'assets/images/selectIcon1.png' : 'assets/images/save.png',
                  width: setWidth(34),
                  height: setWidth(34),
                  fit: BoxFit.cover,
                ),
                SizedBox(
                  width: setWidth(16),
                ),
                Text(
                  '匿名评价',
                  style: TextStyle(
                    color: Color(0xff333333),
                    fontSize: 12,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

}